<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { PropType, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { contextMenuSchema } from '../../../types/contextMenu'
import {
  Settings,
  Eye,
  Download,
  Copy,
  Trash2,
  Edit,
  Plus,
  PlusCircle,
  ArrowDown,
  ArrowUp,
  Minus,
  Move,
  MoreHorizontal,
  FileText,
  Folder,
  ArrowRight,
  Check,
  X,
  Info,
  Upload,
  Star,
  Bookmark,
  RotateCcw,
  Share,
  Lock,
  Globe,
  User,
  Mail,
  Phone,
  Calendar,
  Image,
  Video,
  FileAudio,
  Archive,
  HelpCircle,
  Clipboard,
  MousePointer,
  Target,
  FileDown,
  Layers,
  Type,
  Save,
  Users,
  UserPlus,
  Clock,
  History,
  MessageSquare,
  FilePlus,
  FolderOpen,
  ShieldCheck,
  Settings2,
  UserCircle
} from 'lucide-vue-next'
const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('context-menu')

const { t } = useI18n()

const emit = defineEmits(['visibleChange'])

const props = defineProps({
  schema: {
    type: Array as PropType<contextMenuSchema[]>,
    default: () => []
  },
  trigger: {
    type: String as PropType<'click' | 'hover' | 'focus' | 'contextmenu'>,
    default: 'contextmenu'
  },
  tagItem: {
    type: Object as PropType<RouteLocationNormalizedLoaded>,
    default: () => ({})
  }
})

const command = (item: contextMenuSchema) => {
  item.command && item.command(item)
}

const visibleChange = (visible: boolean) => {
  emit('visibleChange', visible, props.tagItem)
}

const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()

// Lucide图标智能映射 - 确保每个菜单项都有独特的图标
const getLucideIcon = (iconName: string, labelText = '') => {
  const lowerLabel = labelText.toLowerCase()

  // 根据文本内容智能选择独特图标
  if (iconName === 'ele-Plus') {
    if (lowerLabel.includes('当前位置') || lowerLabel.includes('current')) return MousePointer
    if (lowerLabel.includes('下一行') || lowerLabel.includes('next') || lowerLabel.includes('下'))
      return ArrowDown
    if (lowerLabel.includes('子节点') || lowerLabel.includes('child') || lowerLabel.includes('子'))
      return Target
    return Plus // 默认添加图标
  }

  if (iconName === 'ele-Download') {
    if (lowerLabel.includes('章节') || lowerLabel.includes('chapter')) return Layers
    if (lowerLabel.includes('全章') || lowerLabel.includes('全部') || lowerLabel.includes('全'))
      return FileDown
    return Download // 默认下载图标
  }

  // 完整的图标映射表 - 每个图标都是唯一的Lucide图标
  const iconMap: Record<string, any> = {
    // 系统设置类
    'ele-Setting': Settings,
    'ele-Settings': Settings2,
    'ele-Config': Settings2,

    // 查看预览类
    'ele-View': Eye,
    'ele-Preview': Eye,

    // 下载导出类
    'ele-Download': Download,
    'ele-Export': FileDown,
    'ele-Save': Save,

    // 复制粘贴类
    'ele-DocumentCopy': Copy,
    'ele-Copy': Copy,
    'ele-Paste': Clipboard,
    'ele-Clipboard': Clipboard,

    // 删除类
    'ele-Delete': Trash2,
    'ele-Remove': Trash2,

    // 编辑类
    'ele-Edit': Edit,
    'ele-Modify': Edit,
    'ele-Type': Type,

    // 添加类
    'ele-Plus': Plus,
    'ele-Add': PlusCircle,
    'ele-Insert': FilePlus,
    'ele-Create': FilePlus,

    // 移除类
    'ele-Minus': Minus,

    // 移动排序类
    'ele-Rank': Move,
    'ele-Move': Move,
    'ele-Sort': ArrowUp,

    // 更多选项类
    'ele-MoreFilled': MoreHorizontal,
    'ele-More': MoreHorizontal,

    // 文档文件类
    'ele-Document': FileText,
    'ele-File': FileText,
    'ele-Folder': Folder,
    'ele-FolderOpen': FolderOpen,

    // 箭头指向类
    'ele-ArrowRight': ArrowRight,
    'ele-ArrowDown': ArrowDown,
    'ele-ArrowUp': ArrowUp,

    // 状态类
    'ele-Check': Check,
    'ele-Confirm': Check,
    'ele-Close': X,
    'ele-Cancel': X,

    // 信息类
    'ele-InfoFilled': Info,
    'ele-Info': Info,
    'ele-Help': HelpCircle,
    'ele-QuestionFilled': HelpCircle,

    // 上传类
    'ele-Upload': Upload,
    'ele-Import': Upload,

    // 收藏标记类
    'ele-Star': Star,
    'ele-Favorite': Star,
    'ele-Collection': Bookmark,
    'ele-Bookmark': Bookmark,

    // 刷新撤销类
    'ele-RefreshLeft': RotateCcw,
    'ele-Refresh': RotateCcw,
    'ele-Undo': RotateCcw,
    'ele-History': History,

    // 分享类
    'ele-Share': Share,

    // 安全类
    'ele-Lock': Lock,
    'ele-Security': ShieldCheck,
    'ele-Permission': ShieldCheck,

    // 网络连接类
    'ele-Connection': Globe,
    'ele-Network': Globe,
    'ele-Web': Globe,

    // 用户类
    'ele-User': User,
    'ele-Profile': UserCircle,
    'ele-Users': Users,
    'ele-UserAdd': UserPlus,
    'ele-People': Users,

    // 通讯类
    'ele-Message': Mail,
    'ele-Mail': Mail,
    'ele-Chat': MessageSquare,
    'ele-Comment': MessageSquare,
    'ele-Phone': Phone,

    // 时间类
    'ele-Calendar': Calendar,
    'ele-Time': Clock,
    'ele-Clock': Clock,

    // 媒体类
    'ele-Picture': Image,
    'ele-Image': Image,
    'ele-VideoCamera': Video,
    'ele-Video': Video,
    'ele-Headset': FileAudio,
    'ele-Audio': FileAudio,

    // 存档类
    'ele-Box': Archive,
    'ele-Archive': Archive,
    'ele-Package': Archive
  }

  return iconMap[iconName] || Settings
}

defineExpose({
  elDropdownMenuRef,
  tagItem: props.tagItem
})
</script>

<template>
  <ElDropdown
    ref="elDropdownMenuRef"
    :class="prefixCls"
    :trigger="trigger"
    placement="bottom-start"
    @command="command"
    @visible-change="visibleChange"
    popper-class="v-context-menu-popper modern-context-menu"
  >
    <slot></slot>
    <template #dropdown>
      <ElDropdownMenu class="modern-dropdown-menu">
        <ElDropdownItem
          v-for="(item, index) in schema"
          :key="`dropdown${index}`"
          :divided="item.divided"
          :disabled="item.disabled"
          :command="item"
          class="modern-dropdown-item"
        >
          <component :is="getLucideIcon(item.icon, t(item.label))" :size="16" class="menu-icon" />
          <span class="menu-label">{{ t(item.label) }}</span>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="less" scoped>
// 极简轻量的菜单样式 - 参考第一张图片
:deep(.v-context-menu-popper.modern-context-menu) {
  .el-dropdown-menu {
    background: var(--modern-menu-bg);
    backdrop-filter: var(--modern-menu-backdrop-blur);
    -webkit-backdrop-filter: var(--modern-menu-backdrop-blur);
    border: 1px solid var(--modern-menu-border);
    border-radius: var(--modern-menu-radius);
    box-shadow: var(--modern-menu-shadow);
    padding: 4px;
    min-width: 160px;
    transition: all var(--modern-menu-animation-duration) var(--modern-menu-animation-easing);

    .el-dropdown-menu__item {
      border-radius: var(--modern-menu-item-radius);
      margin-bottom: 0;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 400;
      color: var(--modern-menu-item-color);
      transition: all var(--modern-menu-animation-duration) var(--modern-menu-animation-easing);
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.4;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        background: var(--modern-menu-item-hover-bg);
        color: var(--modern-menu-item-hover-color);

        .menu-icon {
          color: var(--modern-menu-icon-hover-color);
        }
      }

      &.is-disabled {
        color: var(--modern-menu-item-disabled-color);
        cursor: not-allowed;

        &:hover {
          background: transparent;
          color: var(--modern-menu-item-disabled-color);

          .menu-icon {
            color: var(--modern-menu-icon-disabled-color);
          }
        }
      }

      &--divided {
        border-top: 1px solid var(--modern-menu-divider);
        margin-top: 4px;
        padding-top: 8px;
      }

      .menu-icon {
        flex-shrink: 0;
        color: var(--modern-menu-icon-color);
        transition: color var(--modern-menu-animation-duration) var(--modern-menu-animation-easing);
      }

      .menu-label {
        flex: 1;
        white-space: nowrap;
      }
    }
  }

  // 简洁的出现动画
  .el-dropdown-menu {
    animation: menuFadeIn 0.15s ease-out;
  }
}

// 简化的动画
@keyframes menuFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>
